<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
    <el-card shadow="hover" class="batch-expiry-card">
        <template #header>
            <div class="card-header">
                <div class="title-with-icon">
                    <Icon name="fa fa-calendar-times-o" class="title-icon" />
                    <span>{{ t('批次效期监控') }}</span>
                </div>
                <div class="header-actions">
                    <el-button link type="primary" @click="refreshData">
                        <Icon name="fa fa-refresh" />
                    </el-button>
                </div>
            </div>
        </template>
        <div v-loading="loading" class="batch-list-container">
            <div v-for="(batch, index) in batchList" :key="index" class="batch-item">
                <div class="batch-info">
                    <div class="batch-header">
                        <span class="batch-name" :title="batch.productName">{{ batch.productName }}</span>
                        <el-tag :type="getTagType(batch.daysLeft)" size="small" effect="light">
                            {{ `剩余${batch.daysLeft}天` }}
                        </el-tag>
                    </div>
                    <div class="batch-details">
                        <div class="detail-item">
                            <Icon name="fa fa-hashtag" class="detail-icon" />
                            <span>{{ `批次号：${batch.batchNo}` }}</span>
                        </div>
                        <div class="detail-item">
                            <Icon name="fa fa-archive" class="detail-icon" />
                            <span>{{ `库存：${batch.quantity}` }}</span>
                        </div>
                        <div class="detail-item">
                            <Icon name="fa fa-clock-o" class="detail-icon" />
                            <span>{{ `有效期至：${batch.expiryDate}` }}</span>
                        </div>
                        <div class="detail-item">
                            <Icon name="fa fa-map-marker" class="detail-icon" />
                            <span>{{ `仓库：${batch.warehouse}` }}</span>
                        </div>
                    </div>
                </div>
                <div class="batch-progress">
                    <el-progress
                        type="circle"
                        :percentage="calculatePercentage(batch.daysLeft, batch.totalDays)"
                        :color="getProgressColor(batch.daysLeft)"
                        :stroke-width="6"
                        :width="60"
                        :show-text="false"
                    />
                    <div class="progress-text" :class="getTextClass(batch.daysLeft)">
                        {{ batch.daysLeft }}
                        <span class="days-label">{{ t('天') }}</span>
                    </div>
                </div>
                <div class="batch-actions">
                    <el-tooltip :content="t('标记处理')" placement="top">
                        <el-button circle size="small" type="success" @click="handleBatch(batch, 'mark')">
                            <Icon name="fa fa-check" />
                        </el-button>
                    </el-tooltip>
                    <el-tooltip :content="t('促销处理')" placement="top">
                        <el-button circle size="small" type="warning" @click="handleBatch(batch, 'promo')">
                            <Icon name="fa fa-tag" />
                        </el-button>
                    </el-tooltip>
                    <el-tooltip :content="t('申请报损')" placement="top">
                        <el-button circle size="small" type="danger" @click="handleBatch(batch, 'loss')">
                            <Icon name="fa fa-trash" />
                        </el-button>
                    </el-tooltip>
                </div>
            </div>
            
            <div v-if="batchList.length === 0" class="empty-data">
                <Icon name="fa fa-check-circle" class="empty-icon" />
                <span>{{ t('暂无临近过期批次') }}</span>
            </div>
            
            <div v-if="batchList.length > 0" class="view-more">
                <el-button link type="info" size="small">
                    {{ t('查看全部') }} <Icon name="fa fa-angle-right" />
                </el-button>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import Icon from '/@/components/icon/index.vue'

const { t } = useI18n()
const loading = ref(false)

// 模拟批次数据
const batchList = ref([
    {
        id: 1,
        productName: '青霉素注射液10ml',
        batchNo: 'BT2023120501',
        quantity: 120,
        expiryDate: '2025-03-15',
        daysLeft: 15,
        totalDays: 730, // 2年保质期
        warehouse: '药品仓'
    },
    {
        id: 2,
        productName: '维生素C泡腾片(橙味)',
        batchNo: 'BT2023080203',
        quantity: 85,
        expiryDate: '2025-02-28',
        daysLeft: 7,
        totalDays: 730,
        warehouse: '北京仓'
    },
    {
        id: 3,
        productName: '巧克力威化饼干',
        batchNo: 'BT2024010105',
        quantity: 200,
        expiryDate: '2025-03-05',
        daysLeft: 30,
        totalDays: 365, // 1年保质期
        warehouse: '食品仓'
    },
    {
        id: 4,
        productName: '婴儿配方奶粉(1段)',
        batchNo: 'BT2023051220',
        quantity: 38,
        expiryDate: '2025-02-20',
        daysLeft: 3,
        totalDays: 730,
        warehouse: '婴幼儿仓'
    }
])

// 计算进度百分比
const calculatePercentage = (daysLeft: number, totalDays: number): number => {
    // 这里反向计算，剩余天数越少，百分比越小
    const consumed = totalDays - daysLeft
    const percentage = 100 - Math.min(100, Math.max(0, (consumed / totalDays) * 100))
    return Math.round(percentage)
}

// 获取进度条颜色
const getProgressColor = (daysLeft: number): string => {
    if (daysLeft <= 7) return '#EF5350'
    if (daysLeft <= 30) return '#FFA726'
    return '#66BB6A'
}

// 获取标签类型
const getTagType = (daysLeft: number): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
    if (daysLeft <= 7) return 'danger'
    if (daysLeft <= 30) return 'warning'
    return 'success'
}

// 获取文本样式
const getTextClass = (daysLeft: number): string => {
    if (daysLeft <= 7) return 'text-danger'
    if (daysLeft <= 30) return 'text-warning'
    return 'text-success'
}

// 处理批次操作
const handleBatch = (batch: any, action: string) => {
    const actionMap: Record<string, string> = {
        'mark': t('已标记 {0} 为关注批次', [batch.productName]),
        'promo': t('已将 {0} 添加到促销计划', [batch.productName]),
        'loss': t('已为 {0} 创建报损申请', [batch.productName])
    }
    
    ElMessage.success(actionMap[action] || t('操作成功'))
}

// 刷新数据
const refreshData = () => {
    loading.value = true
    
    // 模拟数据刷新
    setTimeout(() => {
        // 随机调整天数
        batchList.value = batchList.value.map(batch => {
            const adjustment = Math.floor(Math.random() * 3) - 1 // -1, 0, 或 1
            return { ...batch, daysLeft: Math.max(1, batch.daysLeft + adjustment) }
        })
        
        // 随机排序
        batchList.value.sort(() => Math.random() - 0.5)
        
        loading.value = false
    }, 600)
}

// 初始化
onMounted(() => {
    // 模拟加载数据
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 600)
})
</script>

<style scoped lang="scss">
.batch-expiry-card {
    height: 360px;
    margin-bottom: 20px;
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title-with-icon {
            display: flex;
            align-items: center;
            
            .title-icon {
                color: #FFA726;
                margin-right: 8px;
                font-size: 16px;
            }
        }
        
        .header-actions {
            display: flex;
            align-items: center;
        }
    }
    
    .batch-list-container {
        height: 280px;
        overflow-y: auto;
        
        .batch-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #f0f0f0;
            
            &:last-child {
                border-bottom: none;
            }
            
            .batch-info {
                flex: 1;
                margin-right: 10px;
                
                .batch-header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 5px;
                    
                    .batch-name {
                        font-weight: bold;
                        margin-right: 10px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 180px;
                    }
                }
                
                .batch-details {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 5px;
                    
                    .detail-item {
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        color: #606266;
                        
                        .detail-icon {
                            margin-right: 5px;
                            font-size: 11px;
                            color: #909399;
                        }
                    }
                }
            }
            
            .batch-progress {
                position: relative;
                margin: 0 10px;
                
                .progress-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-weight: bold;
                    font-size: 14px;
                    
                    .days-label {
                        font-size: 10px;
                        font-weight: normal;
                    }
                    
                    &.text-danger {
                        color: #EF5350;
                    }
                    
                    &.text-warning {
                        color: #FFA726;
                    }
                    
                    &.text-success {
                        color: #66BB6A;
                    }
                }
            }
            
            .batch-actions {
                display: flex;
                gap: 5px;
            }
        }
        
        .empty-data {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #909399;
            
            .empty-icon {
                font-size: 48px;
                color: #67C23A;
                margin-bottom: 10px;
            }
        }
        
        .view-more {
            text-align: center;
            margin-top: 10px;
            padding-top: 5px;
            border-top: 1px dashed #f0f0f0;
        }
    }
}

@media screen and (max-width: 992px) {
    .batch-expiry-card {
        .batch-list-container {
            .batch-item {
                .batch-info {
                    .batch-details {
                        grid-template-columns: 1fr;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .batch-expiry-card {
        height: auto;
        
        .batch-list-container {
            height: auto;
            max-height: 400px;
        }
    }
}
</style> 